<template>
  <v-container>
    <v-dialog
      v-model="dialog"
      :max-width="dialogWidth"
    >
      <v-card>
        <v-card-title>
          <span
            v-if="mode==='add'"
            class="text-h3"
          >
            {{ lanChar.ruleConfig.MCGroupTerminalUriAddTitle }}
          </span>
          <span
            v-else
            class="text-h3"
          >
            {{ lanChar.ruleConfig.MCGroupTerminalUriModTitle }}
          </span>
        </v-card-title>
        <v-card-subtitle>
          <span class="text-h3 text--primary font-weight-medium">
            {{ groupInfo.GroupName }}
          </span>
        </v-card-subtitle>
        <v-divider />
        <v-divider />
        <v-divider />
        <v-divider />
        <v-divider />
        <v-card-text>
          <v-container class="text-h4 text--primary font-weight-medium">
            <v-row
              v-for="(v, i) in Uris"
              :key="i"
              dense
              align="center"
            >
              <v-col
                class="d-flex"
                cols="12"
                sm="9"
              >
                <span class="pr-5">
                  {{ lanChar.ruleConfig.MCGroupRuleClientUri }}
                </span>
                <v-text-field
                  v-model.trim="v.Uri"
                  class="pr-5"
                  solo-inverted
                  dense
                  hide-details="auto"
                  :rules="[rules.tcpUdpUri]"
                  :hint="lanChar.ruleConfig.MCGroupRuleTcpUdpUriInputHint"
                />
              </v-col>
              <v-col
                class="d-flex"
                cols="12"
                sm="3"
              >
                <v-select
                  v-model.trim="v.Role"
                  :items="roleItems"
                  color="purple"
                  dense
                  outlined
                  hide-details
                  style="width: 10px"
                />
                <v-btn
                  class="mr-0"
                  color="secondary"
                  min-width="90"
                  @click="confirmDialog(((mode==='add')?lanChar.ruleConfig.MCGroupRuleAddTerminalUriConfirm:lanChar.ruleConfig.MCGroupRuleUpdateTerminalUriConfirm)+v.Uri+'?', ((mode==='add')?(lanChar.ruleConfig.MCGroupRuleClientUri+':'):(groupInfoBak.TerminalInfo.Uris[i].Uri+'--->'))+v.Uri, updateTerminalUri, {Uri: v.Uri, Role: v.Role})"
                >
                  <v-icon class="pr-1">
                    mdi-note-edit-outline mdi-18px
                  </v-icon>
                  {{ (mode==='add')?lanChar.operateAdd:lanChar.operateMod }}
                </v-btn>
              </v-col>
            </v-row>
            <v-row>
              <v-checkbox
                v-model="isSave"
                class="pr-2"
                color="secondary"
                hide-details
                :label="lanChar.checkSave"
                style="height: 100%"
              />
            </v-row>
            <v-divider />
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn
            color="blue darken-1"
            text
            @click="dialog = false"
          >
            {{ lanChar.operateClose }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <material-snackbar-tip
      v-model="snackbarDescp.snackbar"
      :type="snackbarDescp.snackbarType"
      :timeout="snackbarDescp.snackbarTimeout"
      v-bind="{
        bottom: true,
        right: true
      }"
      :text="snackbarDescp.snackbarContent"
    />
    <alert-dialog
      v-model="alert.dialog"
      :title="alert.title"
      :msg="alert.msg"
    />
    <confirm-dialog
      v-model="confirm.dialog"
      :title="confirm.content.title"
      :msg="confirm.content.msg"
      :callback="confirm.operate.callback"
      :input="confirm.operate.input"
    />
  </v-container>
</template>

<script>
  import globalDef from '@/util/globals'
  import lan from '@/util/lan-char'
  import * as mcAxios from '@/util/mcaxios'
  export default {
    name: 'McTerminalUriEditDialog',
    props: {
      value: Boolean,
      input: Object,
    },
    data () {
      return {
        lanChar: lan.GetLan(),
        dialog: this.value,
        dialogWidth: 1000, // document.body.clientWidth ||
        Uris: [{ Uri: '' }],
        groupInfo: {
          GroupName: '',
          TcpServerInfo: {
            Uris: [
              { Uri: '' },
            ],
            ConnectionNum: 0,
          },
          UdpServerInfo: {
            Uris: [
              { Uri: '' },
            ],
            ConnectionNum: 0,
          },
          TerminalInfo: {
            Uris: [
              { Uri: '' },
            ],
            ConnectionNum: 0,
          },
        },
        groupInfoBak: {},
        index: 0,
        isSave: false,
        mode: 'add',
        rules: {
          tcpUdpUri: value => {
            const pattern = /^tcp|udp:\/\/(([a-zA-Z\-0-9.]+))+\/[0-9]{1,5}|(^)$/
            return pattern.test(value) || this.lanChar.checkInvalidUri
          },
        },
        roleItems: [
          'server',
          'client',
        ],
        // snackbar data
        snackbarDescp: {
          snackbar: false,
          snackbarContent: 'snackbar content',
          snackbarTimeout: 2000,
          snackbarType: 'info',
        },
        // dialog data
        alert: {
          dialog: false,
          title: '',
          msg: '',
        },
        confirm: {
          dialog: false,
          content: {
            title: '',
            msg: '',
          },
          operate: {
            callback: null,
            input: null,
          },
        },
      }
    },
    watch: {
      dialog (val, oldVal) {
        if (val === oldVal) return

        this.$emit('input', val)
      },
      value (val, oldVal) {
        if (val === oldVal) return

        this.dialog = val
      },
      input: {
        handler (val, oldVal) {
          if (val === oldVal) return
          if (val.val !== null && val.val !== undefined && val.val.GroupName !== undefined) {
            this.groupInfo = JSON.parse(JSON.stringify(val.val))
            this.groupInfoBak = JSON.parse(JSON.stringify(val.val))
          }
          if (val.mode === 'add') {
            this.Uris = [{ Uri: '', Role: 'client' }]
          } else {
            this.Uris = [{ Uri: this.groupInfoBak.TerminalInfo.Uris[val.index].Uri, Role: (this.groupInfoBak.TerminalInfo.Uris[val.index].Role === 0) ? 'server' : 'client' }]
            this.index = val.index
          }
          this.mode = val.mode
        },
        deep: true,
      },
    },
    created () {
      globalDef.VueObject.$on('lanChange', lanChar => {
        this.lanChar = lanChar
      })
    },
    mounted () {
    },
    beforeDestroy () {
    },
    methods: {
      tipInfo (level, content, timeout) {
        this.snackbarDescp.snackbarType = level
        this.snackbarDescp.snackbarContent = content
        this.snackbarDescp.snackbarTimeout = timeout
        this.snackbarDescp.snackbar = true
      },
      alertInfo (title, content) {
        this.alert.dialog = true
        this.alert.title = title
        this.alert.msg = content
      },
      confirmDialog (title, msg, operate, data) {
        this.confirm.content.title = title
        this.confirm.content.msg = msg
        this.confirm.operate.callback = operate
        this.confirm.operate.input = data
        this.confirm.dialog = true
      },
      updateTerminalUri (v) {
        if (String(this.groupInfo.GroupName) === '' ||
          v.Uri === '') {
          this.alertInfo(this.lanChar.alertInfoTitleInputError, this.lanChar.alertInfoParamError)
          return
        }

        const dataSet = {
          request_type: (this.mode === 'add') ? 'mc group terminal add' : 'mc group terminal update',
          instance_id: 'instance_id',
          sequence_no: 1000,
          data: {
            GroupName: this.groupInfo.GroupName,
            OldUri: (this.mode === 'add') ? '' : this.groupInfoBak.TerminalInfo.Uris[this.index].Uri,
            Uri: v.Uri,
            Role: (v.Role === 'server') ? 0 : 1,
            IsSave: this.isSave,
          },
        }
        mcAxios.axiosSetConfig(dataSet)
          .then((res) => {
            if (res.data.status === true) {
              this.tipInfo('success', this.lanChar.tipInfoOperateSuccess, globalDef.TIPINFO_DISPLAY_DURATION)
              this.dialog = false
            } else {
              this.tipInfo('info', this.lanChar.tipInfoOperateRespFail + res.data.msg, globalDef.TIPINFO_DISPLAY_DURATION)
            }
          })
          .catch((e) => {
            this.tipInfo('error', this.lanChar.tipInfoOperateRequestFail + e, globalDef.TIPINFO_DISPLAY_DURATION)
          })
      },
    },
  }
</script>
